<template>
  <div class="main">
    <view class="address">
      <view class="address-icons">
        <uni-icons type="location" color="#2979ff" size="25"></uni-icons>
        <view class="dotted-line"></view>
        <uni-icons type="location-filled" color="#2979ff" size="25"></uni-icons>
      </view>
      <view class="address-content">
        <view class="user-address">
          <div
            class="address-section"
            v-if="order.fromAddressId != '0'"
            @click="
              switchPage(
                '/pages/address/address-edit?id=' + order.fromAddressId
              )
            "
          >
            <text class="user-info">
              {{ fromAddress.name + " " + fromAddress.phoneNumber }}
            </text>
            <text class="address-info">
              {{ fromAddress.address }}
            </text>
          </div>
          <input
            v-else
            disabled
            placeholder="请选择我的地址"
            class="address-section"
          />
          <text
            class="address-book"
            v-on:click="switchPage('/pages/address/address?type=from')"
            >地址簿</text
          >
        </view>
        <view class="user-address">
          <div
            class="address-section"
            v-if="order.toAddressId != '0'"
            @click="
              switchPage('/pages/address/address-edit?id=' + toAddress.id)
            "
          >
            <text class="user-info">
              {{ toAddress.name + " " + toAddress.phoneNumber }}
            </text>
            <text class="address-info">
              {{ toAddress.address }}
            </text>
          </div>
          <input
            v-else
            disabled
            placeholder="请选择目标地址"
            class="address-section"
          />
          <text
            class="address-book"
            v-on:click="switchPage('/pages/address/address?type=to')"
            >地址簿</text
          >
        </view>
      </view>
    </view>
    <uni-forms ref="form" :modelValue="order">
      <uni-forms-item label="快递" v-if="version == 0">
        <uni-data-picker
          :inputBorder="false"
          v-model="order.deliveryId"
          :localdata="computeDelivery"
          :map="{ text: 'name', value: 'id' }"
          popup-title="请选择快递"
          placeholder="请选择快递"
        ></uni-data-picker>
      </uni-forms-item>
      <uni-forms-item label="商品" class="form-item" v-if="version == 0">
        <div class="products" v-if="order.orderProducts">
          <div
            class="product"
            v-for="(orderProduct, index) in order.orderProducts"
            :key="index"
          >
            {{ orderProduct.product.name + " x" + orderProduct.count }}
          </div>
        </div>
        <div class="info" @click="switchPage('/pages/product/product-list')">
          <div class="placeholder">
            {{ "选择商品" }}
          </div>
          <image
            style="width: 50rpx; opacity: 0.2"
            src="@/static/icons/right.png"
            mode="widthFix"
          ></image>
        </div>
      </uni-forms-item>
    </uni-forms>
    <button plain="true" class="submit" @click="submit">提交</button>
  </div>
</template>
<script lang="ts">
import { listDelivery } from "@/api/delivery";
import { createOrder, ORDER_TYPE_PRODUCT } from "@/api/order";
import { Address, Delivery, Order, OrderProduct, Product } from "@/typings";
import Vue from "vue";
import { mapState } from "vuex";
import Statement from "@/components/statement/statement.vue";

export default Vue.extend({
  data() {
    return {
      order: {
        toAddressId: "0",
        fromAddressId: "0",
        deliveryId: "0",
        orderStatus: 0,
        finalPrice: 0,
        couponPrice: 0,
        originPrice: 0,
        type: ORDER_TYPE_PRODUCT,
        orderProducts: [] as OrderProduct[],
      } as Order,
      toAddress: {} as Address,
      fromAddress: {} as Address,
      deliveryList: [] as Delivery[],
      deliverySearchVO: {
        pageNum: 1,
        pageSize: 100,
      },
    };
  },
  computed: {
    computeDelivery() {
      let list: Delivery[] = this.deliveryList.map((res) => {
        res.name = res.name + " ￥" + res.price + "元";
        return res;
      });
      return list;
    },
    ...mapState("setting", ["version"]),
  },
  onLoad() {
    let that: any = this;
    // 商品页面向这个页面传商品
    // 第一种是商品页面主动跳转到这个页面并且传商品数据
    // 第二种是商品页面回退到上一个页面并且传递商品数据
    const eventChannel = that.getOpenerEventChannel();
    eventChannel.on("productsSelect", (products: Product[]) => {
      this.receiveProducts(products);
    });
    this.listDelivery();
  },
  methods: {
    submit() {
      createOrder(this.order).then((res: Order) => {
        if (res.id) {
          this.switchPage("/pages/order/order-details?id=" + res.id);
        }
      });
    },
    receiveProducts(products: Product[]) {
      let orderProduct: OrderProduct[] = [];
      products.forEach((prod) => {
        orderProduct.push({
          productId: prod.id,
          product: prod,
          count: prod.count,
        });
      });
      this.order.orderProducts = orderProduct;
    },
    listDelivery() {
      listDelivery(this.deliverySearchVO).then((res) => {
        this.deliveryList.push(...res.list);
      });
    },
    switchPage(url: string) {
      uni.navigateTo({
        url,
        events: {
          addressSelect: (res: Address) => {
            if (res.type == "to") {
              this.toAddress = res;
              this.order.toAddressId = res.id;
            } else {
              this.fromAddress = res;
              this.order.fromAddressId = res.id;
            }
          },
          productsSelect: (res: Product[]) => {
            this.receiveProducts(res);
          },
        },
      });
    },
  },
  components: { Statement },
});
</script>
<style lang="scss" scoped>
.main {
  border-radius: 15rpx;
  margin: 0 20rpx;
  padding: 20rpx;

  .address {
    background-color: white;
    display: flex;
    align-items: center;
    .address-icons {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 0 20rpx 0 0rpx;
      // margin-top: 25.83rpx;

      .dotted-line {
        margin: 8.83rpx 0 8.83rpx 0;
        height: 50rpx;
        width: 1rpx;
        border-right: 4rpx dashed #e3e3e3;
      }
    }

    .address-content {
      display: flex;
      flex-direction: column;
      flex: 2;

      .address-book {
        padding: 0 17.66rpx 0 17.66rpx;
        border-left: 1px solid #e3e3e3;
      }

      .user-address {
        display: flex;
        border-bottom: 1px solid #e3e3e3;
        padding: 26.5rpx 0 26.5rpx 0;
        align-items: center;

        .address-section {
          display: flex;
          flex-direction: column;
          flex: 2;
          .user-info {
            font-size: 35rpx;
            font-weight: bold;
          }

          .address-info {
            color: #7b7b7f;
          }
        }
      }

      .target-address {
        display: flex;
        align-items: center;
        padding: 26.5rpx 0 26.5rpx 0;

        .address-section {
          flex: 2;
        }
      }
    }
  }
  .submit {
    width: 300rpx;
    height: 80rpx;
    line-height: 80rpx;
    border-radius: 40rpx;
    margin-top: 50rpx;
    margin-bottom: 30rpx;
    border: 0;
    color: white;
    box-shadow: 10rpx 10rpx 15rpx rgb(245, 245, 245);
    background-color: rgb(0, 170, 255);
  }
  .info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    .placeholder {
      line-height: 38px;
    }
  }
  .template-cover {
    width: 100rpx;
    height: 100rpx;
  }
}
</style>
